<template>
  <transition name="bounce">
    <section class="mui-content pd">
      <mh-header headName="我的备注"> </mh-header>
      <ul class="my-note">
        <li class="flex" v-for="item in noteList" :key="item.id">
          <div class="note-left mh-pd-lr">
            <div class="pic-box">
              <img :src="item.portrait" alt="头像">
            </div>
          </div>
          <div class="note-right mh-pd">
            <p class="u-name" v-text="item.nickname">用户***</p>
            <p class="u-info">{{item.age}}岁 | 河南焦作 | {{item.education}}</p>
            <div class="flex-bt">
              <span class="txt-note">备注：<span v-text="item.remarks"></span></span>
              <button type="button" class="mh-btn">修改</button>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "mind-match",
    data () {
      return {
        noteList: [
          {
            id: '1',
            name: '摩尔比',
            age: 23,
            city: '天津麻花',
            edu: '本科',
            note: '天上掉下来的',
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3292219442,1199407155&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            name: '摩尔比',
            age: 23,
            city: '天津麻花',
            edu: '本科',
            note: '天上掉下来的',
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3292219442,1199407155&fm=26&gp=0.jpg'
          },
          {
            id: '3',
            name: '摩尔比',
            age: 23,
            city: '天津麻花',
            edu: '本科',
            note: '天上掉下来的',
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3292219442,1199407155&fm=26&gp=0.jpg'
          }
        ]
      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      let params = {};
      MH_API.getRemarks(params).then(res => {
        if (res.status === 200) {
          self.noteList = res.data;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .pic-box {
    margin: 0;
    @include mh-avatar-box(4rem, 4rem);
  }
  .my-note {background: #fff;}
  .note-right {
    flex: 1;
    padding-left: 0;
    border-bottom: 1px solid #eee;
    .mh-btn {
      padding: .2rem 1rem;
      border-radius: 1rem;
      font-size: 1.2rem;
    }
  }
  .u-name {@include sc(1.5rem, #333)}
  .u-info {margin-bottom: 1rem;}
  .txt-note {
    @include sc(1.2rem, #e685aa);
    &>span {color: #666;}
  }
</style>
